<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sistema Acadêmico</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/util.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/UniversidadeFacade.js"></script>
<style type="text/css">
#mensagensAluno {
	display: none;
}
.infoMessage {
	background-color: #AAFFAA;
	padding: 2px 6px;
	border-radius: 6px;
	border-color: #88CC88;
	border-width: 1px;
}
.errorMessage {
	background-color: #FFBBBB;
	padding: 2px 6px;
	border-radius: 6px;
	border-color: #CC9999;
	border-width: 1px;
}
</style>

<script type="text/javascript">
var cursos = [];
$(document).ready(function() {
	dwr.util.useLoadingMessage();
	atualizarSelectCursos();
	atualizarTableAlunos();
	$("#dataNascimentoString").datepicker();
	$("#tabs").tabs();
});

function inserirAluno() {
	var aluno = {
			matricula: dwr.util.getValue("matricula"),
			nomeCompleto: dwr.util.getValue("nomeCompleto"),
			dataNascimentoString: dwr.util.getValue("dataNascimentoString"),
			cursoMatriculado: $("#cursoMatriculado :selected").data("objeto") };
	UniversidadeFacade.inserirAluno(aluno, {
		callback: function() {
			addMessage('mensagensAluno', 'Aluno cadastrado com sucesso.', false, true);
			atualizarTableAlunos();
		},
		errorHandler: function(errorString, exception) {
			addMessage('mensagensAluno', errorString, true, true);
		}
	});
}

function atualizarTableAlunos() {
	dwr.util.removeAllRows('tbodyAlunos');
	UniversidadeFacade.obterAlunos({
		callback: function(alunos) {
			console.dir(alunos);
			dwr.util.addRows('tbodyAlunos', alunos,
					[function(aluno) { return aluno.matricula; }, 
					 function(aluno) { return aluno.nomeCompleto; }, 
					 function(aluno) { return aluno.dataNascimentoString; },
					 function(aluno) { return aluno.descricaoCurso; }]);
		},
		errorHandler: function(errorString, exception) {
			addMessage('mensagensAluno', errorString, true, true);
		}
	});
}

function atualizarSelectCursos() {
	dwr.util.removeAllOptions("cursoMatriculado");
	UniversidadeFacade.obterCursos({
		callback: function(cursos) {
			//dwr.util.addOptions("cursoMatriculado", cursos, "codigo", "nome");
			$("#cursoMatriculado").append($("<option/>"));
			for (i = 0; i < cursos.length; i++) {
				var curso = cursos[i];
				var optionCurso = $("<option/>", { 
					value: curso.codigo, text: (curso.centro + " - " + curso.nome)
				});
				optionCurso.data("objeto", curso);
				$("#cursoMatriculado").append(optionCurso);
			}
		},
		errorHandler: function(errorString, exception) {
			addMessage('mensagensAluno', errorString, true, true);
		}
	});
}

function addMessage(idUL, message, error, clear) {
	if (clear) {
		clearMessages(idUL, false);
	}
	var messageClass = error ? 'errorMessage' : 'infoMessage';
	$('#' + idUL).append($('<li/>', {text: message, 'class': messageClass}));
	$('#' + idUL).slideDown();
}
function clearMessages(idUL, hide) {
	if (hide) {
		$('#' + idUL).slideUp();
	}
	$('#' + idUL + " li").remove();
}
</script>
</head>
<body>
<div id="tabs">
	<ul>
		<li><a href="#tabAluno">Aluno</a></li>
	</ul>
	<div id="tabAluno">
		<fieldset>
			<legend>Cadastro de Aluno</legend>
			<ul id="mensagensAluno"></ul>
			<form id="formAluno" onsubmit="inserirAluno(); return false;">
				<label for="cursoMatriculado">Curso:</label>
				<select id="cursoMatriculado">
				</select>
				<br/>
				<label for="matricula">Matrícula:</label>
				<input id="matricula" type="text"/>
				<br/>
				<label for="nomeCompleto">Nome completo:</label>
				<input id="nomeCompleto" type="text"/>
				<br/>
				<label for="dataNascimentoString">Data de nascimento:</label>
				<input id="dataNascimentoString" type="text"/>
				<br/>
				<input type="submit" value="Salvar"/>
			</form>
		</fieldset>
		<h4>Listagem de Alunos</h4>
		<table border="1px">
			<thead>
				<tr>
					<th>Matrícula</th>
					<th>Nome Completo</th>
					<th>Data de Nascimento</th>
					<th>Curso</th>
				</tr>
			</thead>
			<tbody id="tbodyAlunos">
			</tbody>
		</table>
	</div>
</div>
</html>